<template>
<div class="piebox">
  <div class="cover" v-show="(pieNumber && pieLable !== ' ')">
    <span>{{ StrReplace(pieLable) }}</span>
    <span>{{ pieNumber + "%"}}</span>
  </div>
  <div class="chart1" ref="chart"></div>
  <div class="data-list">
    <div class="datas" v-for="(item,index) in chart" :key="index">
      <div>{{ parseInt(item.value) }}%</div>
      <div><i></i><span>{{ item.name }}</span></div>
    </div>
  </div>
</div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'pieTextList',
  data(){
    return{
      pieNumber:0,
      pieLable:'',
    }
  },
  props:{
    chart:{
      type:Array,
      default: []
    },
    strreplace:{
      type:String,
      default: ''
    }
  },
  mounted(){

  },
  methods:{
    PiePage(data,ref){
      let myChart4 = echarts.getInstanceByDom(ref);
      if (myChart4 == undefined){
        myChart4 = echarts.init(ref);
      }
      let Opt;
      Opt = {
        tooltip: {
          show:false,
        },
        legend: {
          show:false,
        },
        series: [
          {
            type: 'pie',
            clockwise : true,
            left:11,
            top:11,
            width:120,
            height:120,
            center:['50%', '50%'],
            radius: ['70%', '100%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            emphasis: {
              scale:true,
              scaleSize :3,
            },
            /*selectedOffset : -30,*/
            labelLine: {
              show: false,
            },
            data: data
          }
        ],
        color:['#07e7f3','#1d9eef','#e9b015']
      };
      myChart4.setOption(Opt);
      myChart4.on('mouseout', (row, index) => {
        this.pieNumber = 0
        this.pieLable = ' '
      })
      myChart4.on('mouseover', (row, index) => {
        this.pieNumber = row.percent
        this.pieLable = row.name
      })
    },
    StrReplace(str){
      let rule = this.strreplace
      let result = str.replace(new RegExp(rule,'g'),'')
      return result

    }
  },
  watch:{
    chart:{
      immediate:true,
      deep:true,
      handler(newValue,oldValue){
        this.$nextTick(() => {
          // console.log(newValue)
          this.PiePage(newValue,this.$refs.chart)
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.piebox{
  margin-left: 120px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  .cover{
    position: absolute;
    top: 0px;
    left: 0px;
    color: #df5000;
    width: 140px;
    height: 100%;
    display: flex;align-items: center;
    justify-content: center;
    flex-direction: column;
    span{
      font-size: 16px;
      color: #f0f6fb;
      &:nth-child(1){
        margin-bottom: 5px;
      }
    }

  }
  .chart1{
    width: 140px;
    height: 140px;
    margin-right: 10px;
    background: url("~@/assets/image/bar-bg.png") no-repeat center center;
    background-size: contain;
  }
  .data-list{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .datas{
      width: 100%;
      div{
        width: 100%;
        box-sizing: border-box;
        &:nth-child(1){
          padding-left: 17px;
          font-size: 22px;
          color: #f0f6fb;
        }
        &:nth-child(2){
          display: flex;
          align-items: center;
          i{
            width: 9px;
            height: 9px;
            margin-right: 6px;
          }
          span{
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            color: #7983a2;
          }
        }
      }
      /*小方块*/
      &:nth-child(1){
        div{
          &:nth-child(2){
            i{
              background: #07e7f3;
            }
          }
        }
      }
      &:nth-child(2){
        div{
          &:nth-child(2){
            i{
              background: #1d9eef;
            }
          }
        }
      }
      &:nth-child(3){
        div{
          &:nth-child(2){
            i{
              background: #e9b015;
            }
          }
        }
      }

    }
  }
}
</style>
